<template>
  <section class="setting-bg pv-12 ph-16">
    <section>
      <div class="flex-row-center">
        <span class="fs-base font-w">请选择员工可以给租客授权的开门权限</span>
        <el-tooltip
          effect="dark"
          placement="top-start"
        >
          <el-icon class="ml20" color="var(--el-text-color-regular)"><QuestionFilled /></el-icon>
          <template #content>
            <div style="width: 300px;">员工可以在房间的开门权限功能中给租客授权和删除开门权限，无权查看租客的密码、卡、和指纹、更能保护租客隐私安全</div>
          </template>
        </el-tooltip>
      </div>
      <div class="mt20">
        <div>电子钥匙（微信开门）</div>
        <el-checkbox-group v-model="key">
          <el-checkbox label="1" style="display: flex;" class="mt10">密码</el-checkbox>
          <el-checkbox label="2" style="display: flex;">授予添加IC卡</el-checkbox>
          <el-checkbox label="3" style="display: flex;">授予添加指纹</el-checkbox>
        </el-checkbox-group>
      </div>
    </section>
    <section class="mt20">
      <div class="fs-base font-w">请选择授权的时间周期</div>
      <el-radio-group v-model="authRange" style="display: flex;align-items: start;flex-direction: column;">
        <el-radio label="1" class="mt10">
          <div class="flex-row-center">
            <span>按入住周期</span>
            <el-tooltip
              effect="dark"
              placement="top-start"
            >
              <el-icon class="ml20" color="var(--el-text-color-regular)"><QuestionFilled /></el-icon>
              <template #content>
                <div style="max-width: 300px;">按办理入住的入住周期发送电子钥匙</div>
              </template>
            </el-tooltip>
          </div>
        </el-radio>
        <el-radio label="2">按待收账单自动续期</el-radio>
      </el-radio-group>
    </section>
    <el-button style="margin-top: 40px;" type="primary">保存</el-button>
  </section>
</template>
<script setup name="AuthWeek">
import { QuestionFilled } from '@element-plus/icons-vue'

const key = ref(['1', '2', '3'])
const authRange = ref('1')
</script>